<template>
    <div class="wrapperPad">
        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            :close-on-click-modal="false"
            :before-close="handleClose">
            <el-form :model="addcomform" ref="addcomform" :rules='addcomformrules' size="mini" class="compDialog">
                <el-form-item label="企业序号" prop="no">
                    <el-input v-model="addcomform.no"></el-input>
                </el-form-item>
                <el-form-item label="企业名称" prop="name">
                    <el-input v-model="addcomform.name"></el-input>
                </el-form-item>
                <el-form-item label="企业代码" prop="code">
                    <el-input v-model="addcomform.code"></el-input>
                </el-form-item>
                <el-form-item label="企业类型">
                    <el-checkbox-group v-model="addcomform.checkListDialog">
                        <el-checkbox label="5">创业板50</el-checkbox>
                        <el-checkbox label="4">中证500</el-checkbox>
                        <el-checkbox label="3">沪深300</el-checkbox>
                        <el-checkbox label="2">上证50</el-checkbox>
                        <el-checkbox label="1">MSCI</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="submitNewComp">提 交</el-button>
                <el-button size="mini" @click="restAddComp">取 消</el-button>
            </span>
        </el-dialog>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form :inline="true" @submit.native.prevent>
                    <el-form-item label="">
                        <el-button size="mini" @click="addComp('add')">添加企业</el-button>
                    </el-form-item>
                    <div style="float:right">
                    <el-form-item label="企业类型：">
                        <el-checkbox-group v-model="checkList" class="checkedType">
                            <el-checkbox label="5">创业板50</el-checkbox>
                            <el-checkbox label="4">中证500</el-checkbox>
                            <el-checkbox label="3">沪深300</el-checkbox>
                            <el-checkbox label="2">上证50</el-checkbox>
                            <el-checkbox label="1">MSCI</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input
                            @keyup.enter.native="gosearchComp"
                            placeholder="企业名称"
                            size="mini"
                            v-model="qiyeName"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="rightMargin" type="primary" size="mini" @click="searchComp">搜索</el-button>
                    </el-form-item>
                    </div>
                    </el-form>
            </el-col>
        </el-row>

        <div>
            <el-table
                :data="tableData"
                border
                @row-click="contentDetails"
                style="width: 100%">
                <el-table-column
                prop="no"
                label="企业序号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="code"
                label="企业代码"
                width="140">
                </el-table-column>
                <el-table-column
                prop="name"
                label="企业名称">
                </el-table-column>
                <el-table-column
                label="企业类型"
                width="350">
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.c_type" :key="index">{{item.name}} <span v-if="index !== scope.row.c_type.length - 1">、</span></span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="vote_subs"
                label="投票建议"
                width="90">
                </el-table-column>
                <el-table-column
                prop="study_subs"
                label="风险治理研究"
                width="120">
                </el-table-column>
                <el-table-column
                label="操作"
                width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" :class="scope.row.is_active ? 'disableCom' : 'enableCom' " @click.stop="changeStatus(scope.row, scope.row.is_active)">{{scope.row.is_active ? '停用': '启用'}}</el-button>
                        <el-button type="text" size="small" @click.stop="editorComp(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            class="paganitionRight"
            @current-change="handleSizeChange"
            :page-size="10"
            :pager-count="9"
            layout="total, prev, pager, next"
            :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
import { throws } from 'assert';
export default {
    name: 'routineReporting',
    data () {
        return {
            dialogVisible: false,
            qiyeName: '', //企业名称
            checkList: [],
            form: {
                type: []
            },
            options: [
                {
                    value: '5',
                    label: '创业板50'
                },
                {
                    value: '4',
                    label: '中证500'
                },
                {
                    value: '3',
                    label: '沪深300'
                }, 
                {
                    value: '2',
                    label: '上证50'
                },
                {
                    value: '1',
                    label: 'MSCI'
                }
            ],
            value4: '', // 下拉选择企业类型
            tableData: [],
            totalCount: 0, // 总数据条数
            curIndex: 1, // 当前页面
            id: '',
            state: '',
            addcomform:{
                no:'', // 企业序号
                name: '', // 企业名称
                code:'', // 企业代码
                checkListDialog: [],
            },
            addcomformrules:{
                no:[
                    {required: true, message: '请输入公司序号', trigger: 'blur'},
                    {min: 2, max: 15, message: '长度在3到15个字符', trigger: 'blur'}
                ],
                name:[
                    {required: true, message: '请输入公司名字', trigger: 'blur'},
                    {min: 2, max: 15, message: '长度在3到15个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入公司代码', trigger: 'blur'}
                ]
            }

        }
    },
    mounted () {
        this.getData({});
    },
    methods: {
        addComp (val) {
            this.addcomform = {
                name: '', 
                code:'', 
                checkListDialog: [],
            },
            this.state = val;
            this.dialogVisible = true;
        },
        restAddComp(){
            this.$refs['addcomform'].resetFields();
            this.dialogVisible = false;
        },
        submitNewComp () {
            if (this.state === 'add') {
                this.$axios.post('/api/com/', JSON.stringify({
                        no: this.addcomform.no,
                        name: this.addcomform.name,
                        code: this.addcomform.code,
                        c_type: this.addcomform.checkListDialog,
                    })).then(res => {
                    if (res.status === 201) {
                        this.dialogVisible = false;
                        this.getData({});
                    }else{
                        
                    }
                })
                .catch((error)=>{
                    if(error.status === 400 && error.data.code){
                        this.$message({
                            type:'error',
                            message:'企业代码必须唯一'
                        })
                    }
                    if(error.status === 400 && error.data.no){
                        this.$message({
                            type:'error',
                            message:'企业序号必须唯一'
                        })
                    }
                })
            }else {
                this.$axios.put(`/api/com/${this.id}/`, JSON.stringify({
                    no: this.addcomform.no,
                    name: this.addcomform.name,
                    code: this.addcomform.code,
                    c_type: this.addcomform.checkListDialog,
                }))
                .then(res => {
                    if (res.status === 200) {
                        this.dialogVisible = false;
                        this.$message({
                            type:'success',
                            message:'修改成功'
                        })
                        this.getData({});

                    }
                })
                .catch((error)=>{
                    if(error.status === 400 && error.data.code){
                        this.$message({
                            type:'error',
                            message:'企业代码必须唯一'
                        })
                    }
                    if(error.status === 400 && error.data.no){
                        this.$message({
                            type:'error',
                            message:'企业序号必须唯一'
                        })
                    }
                })
            }
        },
        editorComp (row) {
            console.log('edit');
            this.state = 'edit';
            this.dialogVisible = true;
            this.addcomform.no = row.no;
            this.addcomform.name = row.name;
            this.addcomform.code = row.code;
            this.id = row.id;
            this.addcomform.checkListDialog = [];
            for(let i=0; i< row.c_type.length; i++) {
                this.addcomform.checkListDialog.push(row.c_type[i].id + '');
            }
        },
        changeType () {
            if(this.value4 !== ''){
                this.checkList = [];
                this.checkList.push(this.value4);
            }else{
                this.checkList = [];
            }
            console.log(this.checkList)

        },
        contentDetails (row) {
            // row, event, column 三个参数
            localStorage.setItem('comname', row.name);
            localStorage.setItem('comcode', row.code);
            this.$router.push({
                path: 'reportDetail',
                query: {
                    id: row.id
                }
            })
        },
        handleClose(done) {
            this.$refs['addcomform'].resetFields();
            done();
            // this.dialogVisible = false;
            // this.$confirm('确认关闭？')
            // .then(_ => {
            //     done();
            // })
            // .catch(_ => {});
        },

        searchComp () {
            console.log(this.checkList);
            if (this.checkList.length === 0) {
                this.getData({
                    search: this.qiyeName,
                });
            }else{
                this.getData({
                    search: this.qiyeName,
                    c_type: this.checkList
                });
            }
        },
        gosearchComp(){
            this.searchComp()
        },
        changeStatus (row, active) {
            this.$axios.put(`/api/com/${row.id}/`, {
                is_active: !active
            }).then(res => {
                if (res.status === 200) {
                    row.is_active = !row.is_active;
                }
            })
        },
        handleSizeChange (val) {
            this.curIndex = val;
            this.getData({
                page: this.curIndex,
                search: this.qiyeName,
                c_type: this.checkList
            });
        },
        getData (params) {
            this.$axios.get('/api/com/', {
                params: {
                    ...params
                },
                paramsSerializer : (params) => {
                    return qs.stringify(params, {arrayFormat: 'repeat'})
                }
            }).then(res => {
                if (res.status === 200) {
                    this.totalCount = res.data.count;
                    this.tableData = res.data.results;
                }
            })
        }
    },
    watch: {
        checkList (curVal) {
            if (curVal.length > 1) {
                this.value4 = '';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.el-checkbox {
    margin-right: 20px;
    width: 82px;
}
.compDialog {
    .el-checkbox-group {
        margin-left: 68px;
    }
}
/* 停用按钮红色 */
.enableCom{
    color: green;
}
.disableCom{
    color: red;
}

</style>

